<template>
  
<div id="body">

      <div id="saizhi">
          <div class="htitle">
            <strong>比赛信息</strong>
          </div>
      </div>

      <div id="gameinfo" style="float:inherit;position:relative">
        <div id="hometeam">
          <div style="position:absolute;left: 50%;margin-left: -500px; top: 50%;margin-top: 50px; ">
          <a class="testA" @click="TeamDetail(teamData.homeTeamInfo.id)" v-if="teamData.homeTeamInfo" >
          {{teamData.homeTeamInfo.teamName}}
          </a>
          </div>
          <div v-if="teamData.homeTeamInfo" @click="TeamDetail(teamData.homeTeamInfo.id)" >
             <img :src="teamData.homeTeamInfo.teamImg" width="100" height="100" style="position: absolute;margin-left: 95px;margin-top: 30px;">
           </div>
          <div v-else>无图片</div>  
        </div>
        <div id="score" >
          <div v-if="gameInfo.league" >
             <img :src="gameInfo.league.leagueImg" width="100" height="100" style="position:absolute;margin-left:250px">
           </div>
          <div v-else>无图片</div> 
          <div style="position:absolute;margin-left:120px;margin-top:100px;">{{ gameInfo.gameTime }}</div>
          <div v-if="gameInfo.league"  style="position:absolute;margin-left:320px;margin-top:100px;">{{ gameInfo.league.leagueName }} 第{{gameInfo.gameRounds}}轮</div>
          <div v-if="gameInfo.gameData" :class="winorlose(gameInfo.gameData)" style="position:absolute;margin-left:250px;margin-top:130px;font-size: 50px;">{{ gameInfo.gameData.homeGoal }} : {{ gameInfo.gameData.awayGoal }}</div>
        </div>
        <div id="awayteam">
          <div style="position:absolute;left: 50%;margin-left: 405px; top: 50%;margin-top: 50px; "> 
          <a class="testA" @click="TeamDetail(teamData.homeTeamInfo.id)" v-if="teamData.awayTeamInfo">
            {{teamData.awayTeamInfo.teamName}}
          </a>
          </div>  
          <div v-if="teamData.awayTeamInfo" @click="TeamDetail(teamData.awayTeamInfo.id)">
             <img :src="teamData.awayTeamInfo.teamImg" width="120" height="120" style="position: absolute;margin-left: 85px;margin-top: 13px;">
           </div>
          <div v-else>无图片</div>
        
        </div>
      </div>

      <div id="saizhi">
          <div class="htitle">
            <strong>球队技术统计</strong>
          </div>
      </div>
      <div id="exhibitor113" style="float:inherit;position:relative" > 
        <div id="exhibitor113left" >
          <div style="position:absolute;left: 50%;margin-left: -200px; top: 50%;margin-top: -10px; ">
          <a class="testA" @click="TeamDetail(teamData.homeTeamInfo.id)" v-if="teamData.homeTeamInfo" >
          {{teamData.homeTeamInfo.teamName}}
          </a>
          </div>
          <div v-if="teamData.homeTeamInfo" @click="TeamDetail(teamData.homeTeamInfo.id)"  style="float:right;margin-top: 0px;margin-right: 0px;">
             <img :src="teamData.homeTeamInfo.teamImg" width="100" height="100">
               </div>
          <div v-else>无图片</div>  
        </div>

        <div id="exhibitor113right" >
          <div v-if="teamData.awayTeamInfo" @click="TeamDetail(teamData.awayTeamInfo.id)">
             <img :src="teamData.awayTeamInfo.teamImg" width="100" height="100">
           </div>
          <div v-else>无图片</div>

          <div style="position:absolute;left: 50%;margin-left: 110px; top: 50%;margin-top: -10px; ">
          <a class="testA" @click="TeamDetail(teamData.homeTeamInfo.id)" v-if="teamData.awayTeamInfo">
            {{teamData.awayTeamInfo.teamName}}
          </a>
          </div>  
        </div> 
      </div> 

      <div id="lineChart" style="width:100%;"></div>
      <div id="lineChart1" style="width:100%;"></div>

      <div id="saizhi">
          <div class="htitle">
            <strong>球员技术统计</strong>
          </div>
      </div>

      <div id="exhibitor110" style="float:inherit;position:relative;height: 200px;" > 
        <div id="exhibitor110left" >
          <div style="position:absolute;left: 50%;margin-left: -180px; top: 50%;margin-top: -70px;">
            <el-select v-model="homeplayerId" clearable placeholder="主队球员" style="width: 120px" @change="changehomeplayer()">
              <el-option v-for="item in homePlayeroptions" :key="item.id" :label="item.playerName" :value="item.id">
                  {{ item.playerName }}
              </el-option>
            </el-select>
            <a class="testA" @click="PlayerDetail(homeplayerinfo.id)" v-if="homeplayerinfo" >
              {{homeplayerinfo.playerName}}
            </a>
            <div v-if="homeplayerinfo">
                <img :src="homeplayerinfo.playerImg" width="120" height="120">
              </div>
            <div v-else>无图片</div>
          </div>
        </div>

        <div id="exhibitor110right" > 
          <div style="position:absolute;left: 50%;margin-left: 60px; top: 50%;margin-top: -70px; ">    
            <el-select v-model="awayplayerId" clearable placeholder="客队球员" style="width: 120px" @change="changeawayplayer()">
              <el-option v-for="item in awayPlayeroptions" :key="item.id" :label="item.playerName" :value="item.id">
                  {{ item.playerName }}
              </el-option>  
            </el-select>
            <a class="testA" @click="PlayerDetail(awayplayerinfo.id)" v-if="awayplayerinfo" >
              {{awayplayerinfo.playerName}}
            </a>
            <div v-if="awayplayerinfo">
                <img :src="awayplayerinfo.playerImg" width="120" height="120">
              </div>
            <div v-else>无图片</div>
          </div>
        </div> 
      </div> 


      <div id="exhibitor119" style="float:inherit" > 
        <div id="exhibitor119left" ref="charthomeplayer">
          <div id="homeattack" ref="homeattack"></div>
          <div id="homepass" ref="homepass"></div>
          <div id="homefoul" ref="homefoul"></div>
        </div>

        <div id="exhibitor119right" ref="chartawayplayer">
          <div id="awayattack" ref="awayattack"></div>
          <div id="awaypass" ref="awaypass"></div>
          <div id="awayfoul" ref="awayfoul"></div>
        </div> 
      </div> 
    <div>
</div>

</div>



</template>

<script>
import * as echarts from 'echarts'
export default {
  inject: ['reload'],
  name:"GameDetail",
  created(){
    this.gameId = this.$route.query.id;
    //this.clickReload()
    // this.homeplayerId = this.homePlayeroptions[0].id
    // this.awayplayerId = this.awayPlayeroptions[0].id
  },
  data(){
    return{
      gameId:"",
      homeData:[],
      teamhomeattackData:[],
      teamhomepassData:[],
      awayData:[],
      teamawayattackData:[],
      teamawaypassData:[],
      teamData:[],
      homePlayeroptions:[],
      awayPlayeroptions:[],
      homeplayerId:"",
      awayplayerId:"",
      homeplayerinfo:{},//主队球员信息
      awayplayerinfo:{},//客队球员信息
      homeplayerData:[],//主队球员数据
      awayplayerData:[],//客队球员数据
      homeattackdata:[],//主队球员进攻数据
      homepassdata:[],//主队球员传球数据
      homefouldata:[],//主队球员防守犯规数据
      awayattackdata:[],//客队球员进攻数据
      awaypassdata:[],//客队球员传球数据
      awayfouldata:[],//客队球员防守犯规数据
      gameInfo:{}//比赛信息
    }
  },
  mounted(){
    this.drawChart(),
    this.loadgame()
    // this.clickReload()
  },
  computed:{
    winorlose(){
      return function(data){
      if(data.homeGoal>data.awayGoal){
        return "win";
      }else if(data.homeGoal==data.awayGoal){
        return "flatten";
      }else{
        return "lose";
      }
      }
      
    }
  },
  

  methods:{
    clickReload() { // 点击之后强制刷新
      this.reload()
    },
    //球队路由跳转
    TeamDetail(id) {
       this.$router.push({
          path: '/front/teamdetail',
          query: {
            id: id
          }
        })
    },
    //球员路由跳转
    PlayerDetail(id) {
       this.$router.push({
          path: '/front/playerdetail',
          query: {
            id: id
          }
        })
    },
  

   //加载比赛信息
   loadgame(){
      this.request.get("/game/front/getgamedetail",{
        params:{
          gameId:this.gameId
        }
      }).then(res=>{
        console.log(res.data)
        this.gameInfo=res.data
      })

   },




   async drawChart() {
      var xData = ['控球率', '进球','射门', '射正','过人','越位','犯规','黄牌','红牌']
      // var homeData = [1,2];
      // var awayData = [2,3];
      var timeLineData = [1];
      let textColor = "#fff";
      let lineColor="rgba(255,255,255,0.2)";
      let colors = [{
          borderColor: "rgba(2, 191, 232,1)",
          start: "rgba(2, 191, 232,0.8)",
          end: "rgba(2, 191, 232,0.1)"
        },
        {
          borderColor: "rgba(1, 231, 152,1)",
          start: "rgba(1, 231, 152,0.1)",
          end: "rgba(1, 231, 152,0.8)"
        },
      ];
      const seriesLabel = {
      show: true
      };
  await  this.request.get("/echarts/front/gamestatistics",{
      params:{
        gameId:this.gameId
      }
    }).then(res=>{
      console.log(res.homemap)
      console.log(res.awaymap)
      this.homeData=res.homemap.parameter
      this.awayData=res.awaymap.parameter
      this.teamhomeattackData=res.homeattackmap.parameter
      this.teamhomepassData=res.homepassmap.parameter
      this.teamawayattackData=res.awayattackmap.parameter
      this.teamawaypassData=res.awaypassmap.parameter
      this.teamData=res.gameData
    
      console.log(this.homeData)
      console.log(this.teamhomeattackData)
      console.log(this.teamhomepassData)
      console.log(this.awayData)
      console.log(this.teamawayattackData)
      console.log(this.teamawaypassData)
      console.log("1111111111111111111111")
      console.log(this.teamData)


    
      // 指定图表的配置项和数据
      var option = {
        title:{
          text:'球队技术统计'
        },
        baseOption: {
          // backgroundColor: background,
          timeline: {
            show: false,
            top: 0,
            data: []
          },
          grid: [
            {
              show: false,
              left: '12%',
              top: '0%',
              bottom: '0%',
              containLabel: true,
              width: '28%'
            },
            {
              show: false,
              left: '50%',
              top: '0%',
              bottom: '18%',
              width: '0%'
            },
            {
              show: false,
              right: '12%',
              top: '0%',
              bottom: '0%',
              containLabel: true,
              width: '28%'
            }
          ],
          xAxis: [
            {
              max:80,
              type: 'value',
              inverse: true, // 强制设置坐标轴分割间隔
              axisLine: { // 坐标轴轴线相关设置
                show: false, // 是否显示坐标轴轴线
                onZero: true, // X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上
                lineStyle: {
                  color: '#00A5CA45'
                }
              },
              axisTick: {
                show: true
              },
              position: 'bottom',
              axisLabel: {
                show: true,
                color: '#c6d3d7',
                fontSize: 12,
                fontFamily: "DINPro-Regular"
              },
              splitLine:{
                show: false
              },
            },
            {
              gridIndex: 1,
              
            },
            {
              max:80,
              gridIndex: 2,
              axisLine: {
                show: true, // 是否显示坐标轴轴线
                onZero: true, // X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上
                lineStyle: {
                  color: 'rgba(1, 231, 152, 0.3)'
                }
              },
              axisTick: {
                show: true
              },
              position: 'bottom',
              axisLabel: {
                show: true,
                color: '#c6d3d7',
                fontSize: 12,
                fontFamily: "DINPro-Regular"
              },
              splitLine: {
                show: false
              },
            }
          ],
          yAxis: [
            {
              type: 'category',
              inverse: true,
              position: 'right',
              axisLine: {
                show: true,
                lineStyle:{
                  color: '#00A5CA45'
                }
              },
              axisTick: {
                show: true
                
              },
              axisLabel: {
                show: true
              },
              
              data: []
            },
            {
              boundaryGap:false,
              barWidth:100,
              splitArea:{
                show:true
              },
              gridIndex: 1,
              type: 'category',
              inverse: true,
              position: 'left',
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: { //中间的xdata
                show: true,
                padding:[0,0,0,0],
                width:10,
                textStyle: {
                  color: '#c1cbcc',
                  fontSize: 15,
                  fontFamily: "pmzd_title"
                  
                },
                align: "center"
              },
              data: xData.map(function(value) {
                      return {
                        value: value,
                        textStyle: {
                          align: 'center',
                          verticalAlign:'top',
                          // lineHeight:0,
                          borderWidth:10,
                          borderType:'dashed',
                          padding:[24,0,0,0],
                          width:100
                        }
                      }
                    })
            },
            {
              gridIndex: 2,
              type: 'category',
              inverse: true,
              axisLine: {
                show: true,
                lineStyle:{
                  color: '#00A5CA45'
                }
              },
              axisTick: {
                show: true
              },
              axisLabel: {
                show: true
              },
              data: []
            }
          ],
          series: []
        },
        options: []
      }
      option.baseOption.timeline.data.push(timeLineData[0])
      option.options.push({
      series: [
      {
          barGap:'50%',
          barCategoryGap: '5%',
          name: "主场",
          type: "bar",
          label:seriesLabel,
          itemStyle: {
            normal: {
              label: {
                show: true, //开启显示
                position: 'left', //在上方显示
                textStyle: { //数值样式
                  color: colors[0].borderColor,
                  fontSize: 12
                }
              },
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                  offset: 0,
                  color: colors[0].start
                },
                {
                  offset: 1,
                  color: colors[0].end
                }
              ]),
              borderColor: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                  offset: 0,
                  color: colors[0].borderColor
                },
                {
                  offset: 1,
                  color: colors[0].end
                }
              ]),
              borderWidth: 1
            }
          },
          data: this.teamhomeattackData,
          animationEasing: "elasticOut"
        },
        {
          barGap:'50%',
          barCategoryGap: '5%',
            name: "客场",
            type: "bar",
            // stack: "2",
            // barWidth: 25,
            label:seriesLabel,
            xAxisIndex: 2,
            yAxisIndex: 2,
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: 'right', //在上方显示
                  textStyle: { //数值样式
                    color: colors[1].borderColor,
                    fontSize: 12
                  }
                },
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                    offset: 0,
                    color: colors[1].start
                  },
                  {
                    offset: 1,
                    color: colors[1].end
                  }
                ]),
                borderColor: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                    offset: 0,
                    color: colors[1].start
                  },
                  {
                    offset: 1,
                    color: colors[1].borderColor
                  }
                ]),
                borderWidth: 1
              }
            },
            data: this.teamawayattackData,
            animationEasing: "elasticOut"
        }
      ]
    });
    
     // 指定图表的配置项和数据
     var xDatap = ['传球','成功传球']
     var optionp = {
        title:{
          text:'球队传球统计'
        },
        baseOption: {
          // backgroundColor: background,
          timeline: {
            show: false,
            top: 0,
            data: []
          },
          grid: [
            {
              show: false,
              left: '12%',
              top: '0%',
              bottom: '0%',
              containLabel: true,
              width: '28%'
            },
            {
              show: false,
              left: '50%',
              top: '0%',
              bottom: '18%',
              width: '0%'
            },
            {
              show: false,
              right: '12%',
              top: '0%',
              bottom: '0%',
              containLabel: true,
              width: '28%'
            }
          ],
          xAxis: [
            {
              max:1000,
              type: 'value',
              inverse: true, // 强制设置坐标轴分割间隔
              axisLine: { // 坐标轴轴线相关设置
                show: false, // 是否显示坐标轴轴线
                onZero: true, // X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上
                lineStyle: {
                  color: '#00A5CA45'
                }
              },
              axisTick: {
                show: true
              },
              position: 'bottom',
              axisLabel: {
                show: true,
                color: '#c6d3d7',
                fontSize: 12,
                fontFamily: "DINPro-Regular"
              },
              splitLine:{
                show: false
              },
            },
            {
              gridIndex: 1,
              
            },
            {
              max:1000,
              gridIndex: 2,
              axisLine: {
                show: true, // 是否显示坐标轴轴线
                onZero: true, // X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上
                lineStyle: {
                  color: 'rgba(1, 231, 152, 0.3)'
                }
              },
              axisTick: {
                show: true
              },
              position: 'bottom',
              axisLabel: {
                show: true,
                color: '#c6d3d7',
                fontSize: 12,
                fontFamily: "DINPro-Regular"
              },
              splitLine: {
                show: false
              },
            }
          ],
          yAxis: [
            {
              type: 'category',
              inverse: true,
              position: 'right',
              axisLine: {
                show: true,
                lineStyle:{
                  color: '#00A5CA45'
                }
              },
              axisTick: {
                show: true
                
              },
              axisLabel: {
                show: true
              },
              
              data: []
            },
            {
              //boundaryGap:false,
              barWidth:100,
              splitArea:{
                show:true
              },
              gridIndex: 1,
              type: 'category',
              inverse: true,
              position: 'left',
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: { //中间的xdata
                show: true,
                padding:[0,0,0,0],
                width:10,
                textStyle: {
                  color: '#c1cbcc',
                  fontSize: 15,
                  fontFamily: "pmzd_title"
                  
                },
                align: "center"
              },
              data: xDatap.map(function(value) {
                      return {
                        value: value,
                        textStyle: {
                          align: 'center',
                          verticalAlign:'top',
                          // lineHeight:0,
                          borderWidth:10,
                          borderType:'dashed',
                          padding:[0,0,0,0],
                          width:100
                        }
                      }
                    })
            },
            {
              gridIndex: 2,
              type: 'category',
              inverse: true,
              axisLine: {
                show: true,
                lineStyle:{
                  color: '#00A5CA45'
                }
              },
              axisTick: {
                show: true
              },
              axisLabel: {
                show: true
              },
              data: []
            }
          ],
          series: []
        },
        options: []
      }
      optionp.baseOption.timeline.data.push(timeLineData[0])
      optionp.options.push({
      series: [
      {
          barGap:'50%',
          barCategoryGap: '5%',
          name: "主场",
          type: "bar",
          label:seriesLabel,
          itemStyle: {
            normal: {
              label: {
                show: true, //开启显示
                position: 'left', //在上方显示
                textStyle: { //数值样式
                  color: colors[0].borderColor,
                  fontSize: 12
                }
              },
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                  offset: 0,
                  color: colors[0].start
                },
                {
                  offset: 1,
                  color: colors[0].end
                }
              ]),
              borderColor: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                  offset: 0,
                  color: colors[0].borderColor
                },
                {
                  offset: 1,
                  color: colors[0].end
                }
              ]),
              borderWidth: 1
            }
          },
          data: this.teamhomepassData,
          animationEasing: "elasticOut"
        },
        {
          barGap:'50%',
          barCategoryGap: '5%',
            name: "客场",
            type: "bar",
            // stack: "2",
            // barWidth: 25,
            label:seriesLabel,
            xAxisIndex: 2,
            yAxisIndex: 2,
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: 'right', //在上方显示
                  textStyle: { //数值样式
                    color: colors[1].borderColor,
                    fontSize: 12
                  }
                },
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                    offset: 0,
                    color: colors[1].start
                  },
                  {
                    offset: 1,
                    color: colors[1].end
                  }
                ]),
                borderColor: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                    offset: 0,
                    color: colors[1].start
                  },
                  {
                    offset: 1,
                    color: colors[1].borderColor
                  }
                ]),
                borderWidth: 1
              }
            },
            data: this.teamawaypassData,
            animationEasing: "elasticOut"
        }
      ]
    });
    
    console.log(option)
    console.log(optionp)
    console.log("=========================")

      this.$nextTick(()=>{
      // 基于准备好的dom，初始化echarts实例
      var myLineChart = echarts.init(
        document.getElementById("lineChart")
      );
      this.autoHeight = this.homeData.length * 35 + 10; 
      myLineChart.resize({height:this.autoHeight}); 
      myLineChart.setOption(option);
      var myLineChartp = echarts.init(
        document.getElementById("lineChart1")
      );
      this.autoHeight = this.homeData.length * 7 + 10; 
      myLineChartp.resize({height:this.autoHeight}); 
      myLineChartp.setOption(optionp);


      })
    }),

    
      //加载主队球员列表
      await this.request.get("/player/getPlayerByTeamId/"+this.teamData.homeTeamInfo.id).then(res=>{
        console.log(this.teamData.homeTeamInfo.id)
        console.log(res.data)
        this.homePlayeroptions=res.data
      })

      //加载客队球员列表
      await this.request.get("/player/getPlayerByTeamId/"+this.teamData.awayTeamInfo.id).then(res=>{
        console.log(this.teamData.awayTeamInfo.id)
        console.log(res.data)
        this.awayPlayeroptions=res.data
      })


      
    },
    async changehomeplayer(){
      const seriesLabel = {
      show: true
      };
      var option1 = {
      title: {
        text: '进攻'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01],
      },
      yAxis: {
        type: 'category',
        data: [ '进球','助攻','射门','射正','尝试过人','成功过人'],

      },
      series: [
        {
          name: '参数',
          type: 'bar',//柱状图
          data: [1,2,3,4,5,6],
          label:seriesLabel
        },
      ]
    };
    var option2 = {
      title: {
        text: '传球'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01],

      },
      yAxis: {
        type: 'category',
        data: [ '传球','成功传球'],
      },
      series: [
        {
          name: '参数',
          type: 'bar',//柱状图
          data: [],
          label: seriesLabel
        },
      ]
    };
    var option3 = {
      title: {
        text: '防守与犯规'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01],
      },
      yAxis: {
        type: 'category',
        data: ['抢断','越位','犯规','被犯规','黄牌','红牌'],
      },
      series: [
        {
          name: '参数',
          type: 'bar',//柱状图
          data: [],
          label: seriesLabel
        },
      ]
    };
    
    //选择主场球员时，查询该球员的数据
      await this.request.get("/player/"+this.homeplayerId).then(res=>{
        console.log(res.data)
        this.homeplayerinfo=res.data
      }),
      await this.request.get("/echarts/front/getattacksingledata",{
        params:{
          gameId:this.gameId,
          playerId:this.homeplayerId
        }
      }).then(res=>{
        console.log(res.pdsmap.parameter)
        this.homeattackdata=res.pdsmap.parameter
      }),

      await this.request.get("/echarts/front/getpasssingledata",{
        params:{
          gameId:this.gameId,
          playerId:this.homeplayerId
        }
      }).then(res=>{
        console.log(res.pdsmap.parameter)
        this.homepassdata=res.pdsmap.parameter
      }),
      await this.request.get("/echarts/front/getfoulsingledata",{
        params:{
          gameId:this.gameId,
          playerId:this.homeplayerId
        }
      }).then(res=>{
        console.log(res.pdsmap.parameter)
        this.homefouldata=res.pdsmap.parameter
      }),
      option1.series[0].data=this.homeattackdata;
      option2.series[0].data=this.homepassdata;
      option3.series[0].data=this.homefouldata;
      console.log("================")
      console.log(option1)
      console.log(option2)
      console.log(option3)
      this.$nextTick(() => {
        var myChart1 = echarts.init(this.$refs.homeattack);
        myChart1.setOption(option1)

        var myChart2=echarts.init(this.$refs.homepass);
        myChart2.setOption(option2)
        
        var myChart3=echarts.init(this.$refs.homefoul);
        myChart3.setOption(option3)
      })

    },
    async changeawayplayer(){
      const seriesLabel = {
      show: true
      };
      var option4 = {
      title: {
        text: '进攻'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01],
      },
      yAxis: {
        type: 'category',
        data: [ '进球','助攻','射门','射正','尝试过人','成功过人'],
      },
      series: [
        {
          name: '参数',
          type: 'bar',//柱状图
          data: [],
          label: seriesLabel
        },
      ]
    };
    var option5 = {
      title: {
        text: '传球'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01],

      },
      yAxis: {
        type: 'category',
        data: [ '传球','成功传球'],
      },
      series: [
        {
          name: '参数',
          type: 'bar',//柱状图
          data: [],
          label: seriesLabel
        },
      ]
    };
    var option6 = {
      title: {
        text: '防守与犯规'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01],

      },
      yAxis: {
        type: 'category',
        data: ['抢断','越位','犯规','被犯规','黄牌','红牌'],
      },
      series: [
        {
          name: '参数',
          type: 'bar',//柱状图
          data: [],
          label: seriesLabel
        },
      ]
    };
      //选择客场球员时，查询该球员的数据
      await this.request.get("/player/"+this.awayplayerId).then(res=>{
        console.log(res.data)
        this.awayplayerinfo=res.data
      }), 
      await this.request.get("/echarts/front/getattacksingledata",{
        params:{
          gameId:this.gameId,
          playerId:this.awayplayerId
        }
      }).then(res=>{
          console.log(res.pdsmap.parameter)
        this.awayattackdata=res.pdsmap.parameter
      });
      await this.request.get("/echarts/front/getpasssingledata",{
        params:{
          gameId:this.gameId,
          playerId:this.awayplayerId
        }
      }).then(res=>{
          console.log(res.pdsmap.parameter)
        this.awaypassdata=res.pdsmap.parameter
      });
      await this.request.get("/echarts/front/getfoulsingledata",{
        params:{
          gameId:this.gameId,
          playerId:this.awayplayerId
        }
      }).then(res=>{
          console.log(res.pdsmap.parameter)
        this.awayfouldata=res.pdsmap.parameter
      });
      option4.series[0].data=this.awayattackdata;
      option5.series[0].data=this.awaypassdata;
      option6.series[0].data=this.awayfouldata;
      console.log("================")
      console.log(option4)
      console.log(option5)
      console.log(option6)
      this.$nextTick(() => {
        var myChart4 = echarts.init(this.$refs.awayattack);
        myChart4.setOption(option4)
        var myChart5=echarts.init(this.$refs.awaypass);
        myChart5.setOption(option5)
        var myChart6=echarts.init(this.$refs.awayfoul);
        myChart6.setOption(option6)
      })
      
      
    },

  },
};
</script>

<style>
#saizhi {
  border: 1px solid #e5e5e5;
  margin-top: 8px;
  clear: both;
}
.htitle {
  line-height: 35px;
  text-align: center;
  font-size: 14px;
  background-color: #f0f0f0;
  position: relative;
}
#exhibitor110{ 
  margin:0 auto;
  width:50%;
  height:100px
} 
#exhibitor110left{ 
  float:left;
  width:50%; 
  height:100%; 
  background:#eeeeee;
  border: 1px solid #e5e5e5;
} 
#exhibitor110right{ 
  float:right; 
  width:50%;
  height:100%;
  border: 1px solid #e5e5e5;
} 
#exhibitor113{ 
  margin:0 auto;
  width:50%;
  height:100px
} 
#exhibitor113left{ 
  float:left;
  width:50%; 
  height:100%; 
  background:#eeeeee;
  border: 1px solid #e5e5e5;
} 
#exhibitor113right{ 
  float:right; 
  width:50%;
  height:100%;
  border: 1px solid #e5e5e5;
} 
#exhibitor119{ 
  margin:0 auto;
  width:100%;
  height:300px
} 
#exhibitor119left{ 
  float:left;
  width:50%; 
  height:100%; 
  /* background:#eeeeee; */
  border: 1px solid #e5e5e5;
} 
#exhibitor119right{ 
  float:right; 
  width:50%;
  height:100%;
  border: 1px solid #e5e5e5;
} 

#homeattack{
  float:left;
  width: 34%;
  height:100%;
  border: 1px solid #e5e5e5;
}
#homepass{
  float:left;
  width: 33%;
  height:100%;
  border: 1px solid #e5e5e5;
}
#homefoul{
  float:right;
  width:33%;
  height:100%;
  border: 1px solid #e5e5e5;
}
#awayattack{
  float:left;
  width: 34%;
  height:100%;
  border: 1px solid #e5e5e5;
}
#awaypass{
  float:left;
  width: 33%;
  height:100%;
  border: 1px solid #e5e5e5;
}
#awayfoul{
  float:right;
  width:33%;
  height:100%;
  border: 1px solid #e5e5e5;
}

#gameinfo{
  height: 200px;
  width:100%;
}

#hometeam{
  float:left;
  width: 25%;
  height:100%;
  border: 1px solid #e5e5e5;
}
#score{
  float:left;
  width: 50%;
  height:100%;
  border: 1px solid #e5e5e5;
}
#awayteam{
  float:right;
  width:25%;
  height:100%;
  border: 1px solid #e5e5e5;
}
.testA{
  color: #005eb8;
}
.testA:hover{
  cursor: pointer;
}
.win{
  color:green;
}
.flatten{
  color:#005eb8;
}
.lose{
  color:red
}
</style>